import React, { Component } from 'react';
import styles from './index.less';
import { connect } from 'dva';
import park_icon from '../../../assets/park_icon.png';
import arrow_left_black_icon from '../../../assets/arrow_left_black_icon.png';
import arrow_right_black_icon from '../../../assets/arrow_right_black_icon.png';
import location_img from '../../../assets/location_img.png';
import {
  List,
  Checkbox,
  Input,
  Select,
  Cascader,
  Modal,
  Tabs,
  Button,
  DatePicker,
  message,
} from 'antd';
import VehicleTab from '../vehicleInfoQuery/vehicleInfoQueryDetail/tabs/vehicleTab';
import * as echarts from 'echarts';
import { EChartsType } from 'echarts/core';
import moment from 'moment';
import StatusTab from '@/pages/connectPlat/vehicleInfoQuery/vehicleInfoQueryDetail/tabs/statusTab';
import { provinceData } from './constant';

const mapStateToProps = (state: any) => ({
  connectPlat: state.connectPlat,
  menu: state.menu,
  loading: state.loading.models['connectPlatLog'],
});

type NullOrEchartInstance = null | EChartsType;
class MapMonitoring extends Component<any, any> {
  state = {
    openCarList: false,
    searchMoreOpen: false,
    inputVin: '', // 查询输入的vin
    inputCarNo: '', // 查询输入的车牌
    inputBrand: undefined, // 查询输入的品牌
    inputSeries: undefined, // 查询输入的车系
    inputModel: undefined, // 查询输入的车型
    allSelectData: [], // 所有的城市选择数据
    selectPlaceData: '全国',
    isModalOpen: false,
    modalOpenVin: '', // 车辆信息弹框的vin
    isTrajectoryModalOpen: false,
    trajectoryModalCar: {}, // 历史轨迹弹框的车辆信息
    trajectoryListData: [], // 历史轨迹列表数据
    trajectorySearchStartDate: '', // 历史轨迹查询开始时间
    trajectorySearchEndDate: '', // 历史轨迹查询结束时间
    trajectoryLineArr: [], // 轨迹回放坐标点数据
    SOCEchart: null as NullOrEchartInstance,
    tempEchart: null as NullOrEchartInstance,
    refreshEchart: false, // 电池监控是否正在刷新
    dailyMileageEchart: null as NullOrEchartInstance,
    dailyChargeEchart: null as NullOrEchartInstance,
    selectTrajectoryNo: 99999, // 选择的轨迹编号

    onlineCars: '0', // 在线车辆
    offlineCars: '0', // 离线车辆
    alarmCount: '0', // 平台报警数
    selectProvinceLabelStr: '', // 选择的省字符串
    selectCityLabelStr: '', // 选择的市字符串
    showOnlineCars: true,
    showOfflineCars: true,
    carMapProvinceRankData: [], // 所有省份在线离线车辆排行
    carMapCityRankData: [], // 该省份下所有城市在线离线车辆排行
    carMapListData: [], // 所有查询车辆列表
    displayCarMapListData: [], // 所有查询车辆列表---用于展示
    positionCarMapListData: [], // 点击车辆定位时用于计算的车辆列表
    allBrandData: [], // 所有品牌数据
    displayBrandData: [], // 所有品牌数据----用于展示
    allSeriesData: [], // 所有车系数据
    displaySeriesData: [], // 所有车系数据----用于展示
    allModelData: [], // 所有车型数据
    displayModelData: [], // 所有车型数据----用于展示
    batteryMonitoringData: {}, // 电池监控数据
    carUseInfoData: {}, // 运营信息数据
    showAlarmModal: false, // 是否展示报警页面弹框
    showAlarmByVinModal: false, // 是否展示根据vin号查找报警页面弹框
    alarmUrl: '', // 报警页面地址
    alarmByVinUrl: '', // 根据vin号查找报警页面地址
    alarmByVinUrlVin: '', // 根据vin号查找报警页面地址的vin
  };

  map = null;
  trajectoryMap = null;
  trajectoryMarker = null;
  mapLayer = null;
  cluster = null;
  getCarMapCount = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'common/listGet',
      payload: {
        url: '/usertravel/carMapCount',
        province: this.state.selectProvinceLabelStr,
        city: this.state.selectCityLabelStr,
      },
      callback: data => {
        if (data.statusCode === '0') {
          this.setState({
            onlineCars: data.data.onlineNum,
            offlineCars: data.data.offlineNum,
            alarmCount: data.data.alarmNum,
          });
        }
      },
    });
  };

  getCarMapList = async () => {
    const { dispatch } = this.props;
    await dispatch({
      type: 'common/listGet',
      payload: {
        url: '/usertravel/carMapList',
        province: this.state.selectProvinceLabelStr,
        city: this.state.selectCityLabelStr,
        vin: this.state.inputVin,
        seriesName: this.state.inputSeries === undefined ? '' : this.state.inputSeries,
        licence: this.state.inputCarNo,
        typeName: this.state.inputModel === undefined ? '' : this.state.inputModel,
        brand: this.state.inputBrand === undefined ? '' : this.state.inputBrand,
        page: '1',
        limit: '1000000000',
      },
      callback: rsp => {
        if (rsp.statusCode === '0') {
          const data = rsp?.data ?? {};
          const tempDisplayCarMapListData = data.records.filter(record => {
            const enginestate = record.enginestate;
            const filteredState = [];

            if (this.state.showOfflineCars) {
              filteredState.push('0');
            }
            if (this.state.showOnlineCars) {
              filteredState.push('2');
            }
            return filteredState.includes(enginestate);
          });

          this.setState({
            carMapListData: data.records,
            displayCarMapListData: tempDisplayCarMapListData,
          });
        }
      },
    });
  };

  getCarBrandAndSeriesAndModel = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'common/listGet',
      payload: { url: '/device/connect/platform/getBrandTotal' },
      callback: data => {
        if (data.statusCode === '0') {
          this.setState({
            allBrandData: data.data?.filter(i => i.brandName),
            displayBrandData: data.data
              ?.map(i =>
                i.brandName
                  ? {
                      value: i.brandId,
                      label: i.brandName,
                    }
                  : undefined,
              )
              .filter(i2 => i2 !== undefined),
          });
        }
      },
    });
    dispatch({
      type: 'common/listGet',
      payload: { url: '/device/connect/platform/getSeriesTotal' },
      callback: data => {
        if (data.statusCode === '0') {
          this.setState({
            allSeriesData: data.data?.filter(i => i.seriesName),
            displaySeriesData: data.data
              ?.map(i =>
                i.seriesName
                  ? {
                      value: i.seriesId,
                      label: i.seriesName,
                    }
                  : undefined,
              )
              .filter(i2 => i2 !== undefined),
          });
        }
      },
    });
    dispatch({
      type: 'common/listGet',
      payload: { url: '/common/vehicle/gettypelist', brandId: '', seriesId: '' },
      callback: data => {
        if (data.statusCode === '0') {
          this.setState({
            allModelData: data.data?.filter(i => i.name),
            displayModelData: data.data
              ?.map(i =>
                i.name
                  ? {
                      value: i.code,
                      label: i.name,
                    }
                  : undefined,
              )
              .filter(i2 => i2 !== undefined),
          });
        }
      },
    });
  };

  getCarMapCityRank = async () => {
    const { dispatch } = this.props;
    await dispatch({
      type: 'common/listGet',
      payload: { url: '/usertravel/carMapCityRank', province: this.state.selectProvinceLabelStr },
      callback: data => {
        if (data.statusCode === '0') {
          this.setState({
            carMapCityRankData: data.data,
          });
        }
      },
    });
  };

  componentWillUnmount() {
    clearInterval(this.autoRefreshEchartTimer);
  }

  async componentDidMount() {
    this.initMap();

    this.getCarBrandAndSeriesAndModel();
    this.getCarMapCount();
    await this.getCarMapList();
    const { dispatch } = this.props;
    dispatch({
      type: 'common/listGet',
      payload: { url: '/usertravel/carMapProvinceRank' },
      callback: async data => {
        if (data.statusCode === '0') {
          await this.setState({
            carMapProvinceRankData: data.data,
          });
          const provincesPoint = this.setProvincesPoint();
          this.mapLayer.add(provincesPoint);
          this.setMapProvincesAction();
          this.getProvinceAndCitysData();
        }
      },
    });

    dispatch({
      type: 'vehicleInfoQuery/getDataWithRes',
      payload: {
        url: '/common/bigdata/url',
        dictKey: 'alarmViewHour',
      },
      callback: response => {
        if (response && response.statusCode === '0' && response.data) {
          this.setState({
            alarmUrl: `${response.data}`,
          });
        }
      },
    });

    dispatch({
      type: 'vehicleInfoQuery/getDataWithRes',
      payload: {
        url: '/common/bigdata/url',
        dictKey: 'alarmViewByVin',
      },
      callback: response => {
        if (response && response.statusCode === '0' && response.data) {
          this.setState({
            alarmByVinUrl: `${response.data}`,
          });
        }
      },
    });
  }

  setSOCEchart = () => {
    this.state.SOCEchart = echarts.init(document.getElementById('SOCEchart') as HTMLElement);
    this.state.SOCEchart.clear();
    this.state.SOCEchart.setOption({
      title: {
        text: '总电压变化趋势',
        textStyle: {
          fontSize: 16,
        },
        subtextStyle: {
          fontSize: 16,
        },
        subtext: `当前电压：${
          this.state.batteryMonitoringData?.batteryCurrentInfo?.totalVoltage ?? '0'
        }V`,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            color: 'rgba(0, 0, 0, 0)',
          },
        },
        formatter: '{b0}<br />{c0}V',
        show: true,
      },
      xAxis: {
        type: 'category',
        alignTicks: false,
        axisTick: {
          alignWithLabel: true,
        },
        axisLabel: {
          formatter: function (value, index) {
            return value.split(' ')[1];
          },
        },
        data: this.state.batteryMonitoringData?.batteryHistoryInfo?.map(i => i.ngtpCreateTime),
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: this.state.batteryMonitoringData?.batteryHistoryInfo?.map(i => i.totalVoltage),
          type: 'line',
          triggerLineEvent: true,
          showSymbol: false,
          symbol: 'circle',
          itemStyle: {
            color: '#49A9EE',
          },
        },
      ],
    });
  };

  setTempEchart = () => {
    this.state.tempEchart = echarts.init(document.getElementById('TempEchart') as HTMLElement);
    this.state.tempEchart.clear();
    this.state.tempEchart.setOption({
      title: {
        text: '温度变化趋势',
        textStyle: {
          fontSize: 16,
        },
        subtextStyle: {
          fontSize: 16,
        },
        subtext: `当前温度：${
          this.state.batteryMonitoringData?.batteryCurrentInfo?.maxTemperature ?? '0'
        }℃`,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            color: 'rgba(0, 0, 0, 0)',
          },
        },
        formatter: '{b0}<br />{c0}℃',
        show: true,
      },
      xAxis: {
        type: 'category',
        alignTicks: false,
        axisTick: {
          alignWithLabel: true,
        },
        axisLabel: {
          formatter: function (value, index) {
            return value.split(' ')[1];
          },
        },
        data: this.state.batteryMonitoringData?.batteryHistoryInfo?.map(i => i.ngtpCreateTime),
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: this.state.batteryMonitoringData?.batteryHistoryInfo?.map(i => i.maxTemperature),
          type: 'line',
          triggerLineEvent: true,
          showSymbol: false,
          symbol: 'circle',
          itemStyle: {
            color: '#98D87D',
          },
        },
      ],
    });
  };

  setSingleVoltageEchart = () => {
    // singleVoltageEchart
    this.state.batteryMonitoringData?.batteryCurrentInfo?.energyStorageVoList?.map((i, index) => {
      let maxValue = 0;
      let minValue = 0;
      i.batteryVoltageList?.map(x => {
        parseFloat(x) > maxValue
          ? (maxValue = parseFloat(x))
          : parseFloat(x) < minValue
          ? (minValue = parseFloat(x))
          : null;
      });
      const singleVoltageEchart = echarts.init(
        document.getElementById(`singleVoltageEchart${index}`) as HTMLElement,
      );
      singleVoltageEchart.clear();
      singleVoltageEchart.setOption({
        tooltip: {
          show: true,
          valueFormatter: value => value + 'V',
        },
        xAxis: {
          type: 'category',
          axisTick: {
            alignWithLabel: true,
          },
          data: i.batteryVoltageList?.map((e, eIndex) => eIndex + 1),
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            itemStyle: {
              color: '#3BA1FF',
            },
            data: i.batteryVoltageList?.map(x => {
              if (parseFloat(x) === maxValue) {
                return {
                  value: x,
                  itemStyle: {
                    color: '#EF939E',
                  },
                };
              } else if (parseFloat(x) === minValue) {
                return {
                  value: x,
                  itemStyle: {
                    color: '#A5F42A',
                  },
                };
              } else {
                return x;
              }
            }),
            type: 'bar',
          },
        ],
      });
    });
  };

  setSingleTempEchart = () => {
    this.state.batteryMonitoringData?.batteryCurrentInfo?.energyStorageVoList?.map((i, index) => {
      let maxValue = 0;
      let minValue = 0;
      i.probeTemperatureList?.map(x => {
        parseFloat(x) > maxValue
          ? (maxValue = parseFloat(x))
          : parseFloat(x) < minValue
          ? (minValue = parseFloat(x))
          : null;
      });
      const singleTempEchart = echarts.init(
        document.getElementById(`singleTempEchart${index}`) as HTMLElement,
      );
      singleTempEchart.clear();
      singleTempEchart.setOption({
        tooltip: {
          show: true,
          valueFormatter: value => value + '℃',
        },
        xAxis: {
          type: 'category',
          axisTick: {
            alignWithLabel: true,
          },
          data: i.probeTemperatureList?.map((e, eIndex) => eIndex + 1),
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            itemStyle: {
              color: '#3BA1FF',
            },
            data: i.probeTemperatureList?.map(x => {
              if (parseFloat(x) === maxValue) {
                return {
                  value: x,
                  itemStyle: {
                    color: '#EF939E',
                  },
                };
              } else if (parseFloat(x) === minValue) {
                return {
                  value: x,
                  itemStyle: {
                    color: '#A5F42A',
                  },
                };
              } else {
                return x;
              }
            }),
            type: 'bar',
          },
        ],
      });
    });
  };

  setDailyMileageEchart = () => {
    this.state.dailyMileageEchart = echarts.init(
      document.getElementById('dailyMileageEchart') as HTMLElement,
    );
    this.state.dailyMileageEchart.clear();
    this.state.dailyMileageEchart.setOption({
      title: {
        text: '日行驶里程折线图（公里）',
        textStyle: {
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            color: 'rgba(0, 0, 0, 0)',
          },
        },
        formatter: '{b0}<br />{c0}公里',
        show: true,
      },
      xAxis: {
        type: 'category',
        alignTicks: false,
        axisTick: {
          alignWithLabel: true,
        },
        axisLabel: {
          formatter: function (value, index) {
            return value.split('-')[2];
          },
        },
        data: this.state.carUseInfoData?.mileageInfo?.map(i => {
          return `${i.day.substr(0, 4)}-${i.day.substr(4, 2)}-${i.day.substr(6, 2)}`;
        }),
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: this.state.carUseInfoData?.mileageInfo?.map(i => i.mileage),
          type: 'line',
          triggerLineEvent: true,
          showSymbol: false,
          symbol: 'circle',
          itemStyle: {
            color: '#1890FF',
          },
        },
      ],
    });
  };

  setDailyChargeEchart = () => {
    this.state.dailyChargeEchart = echarts.init(
      document.getElementById('dailyChargeEchart') as HTMLElement,
    );
    this.state.dailyChargeEchart.clear();
    this.state.dailyChargeEchart.setOption({
      title: {
        text: '日充电时间折线图（小时）',
        textStyle: {
          fontSize: 16,
        },
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            color: 'rgba(0, 0, 0, 0)',
          },
        },
        formatter: '{b0}<br />{c0}小时',
        show: true,
      },
      xAxis: {
        type: 'category',
        alignTicks: false,
        axisTick: {
          alignWithLabel: true,
        },
        axisLabel: {
          formatter: function (value, index) {
            return value.split('-')[2];
          },
        },
        data: this.state.carUseInfoData?.chargeInfo?.map(i => {
          return `${i.day.substr(0, 4)}-${i.day.substr(4, 2)}-${i.day.substr(6, 2)}`;
        }),
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: this.state.carUseInfoData?.chargeInfo?.map(i => i.chargingTime),
          type: 'line',
          triggerLineEvent: true,
          showSymbol: false,
          symbol: 'circle',
          itemStyle: {
            color: '#1890FF',
          },
        },
      ],
    });
  };

  // 获取全部选择省市数据并组装展示
  getProvinceAndCitysData = () => {
    const self = this;
    AMap.plugin('AMap.DistrictSearch', function () {
      var districtSearch = new AMap.DistrictSearch({
        subdistrict: 2, //返回下一级行政区
        showbiz: false, //最后一级返回街道信息
      });

      // 搜索所有省/直辖市信息
      districtSearch.search('中国', function (status, result) {
        let options = [
          {
            value: '100000',
            label: '全国',
          },
        ];
        if (result.info === 'OK') {
          const allProvinces = result.districtList[0].districtList;
          for (let i = 0; i < allProvinces.length; i++) {
            let optionItem = {
              value: allProvinces[i].adcode,
              label: allProvinces[i].name,
              children: [],
            };
            if (allProvinces[i].districtList !== undefined) {
              for (let j = 0; j < allProvinces[i].districtList.length; j++) {
                let optionSubItem = {
                  value: allProvinces[i].districtList[j].adcode,
                  label: allProvinces[i].districtList[j].name,
                };
                optionItem.children.push(optionSubItem);
              }
            }
            options.push(optionItem);
          }
        }
        self.setState({
          allSelectData: options,
        });
      });
    });
  };

  // 点击查询
  startSearch = async () => {
    console.log(
      `查询的vin为：${this.state.inputVin};\n查询的车牌为：${
        this.state.inputCarNo
      };\n查询的品牌为：${
        this.state.inputBrand === undefined ? '' : this.state.inputBrand
      };\n查询的车系为：${
        this.state.inputSeries === undefined ? '' : this.state.inputSeries
      };\n查询的车型为：${this.state.inputModel === undefined ? '' : this.state.inputModel}`,
    );
    await this.getCarMapList();
    this.setState({
      openCarList: true,
    });
  };

  // 更新车辆列表所展示的车辆（切换层级时）
  updateDisplayCarList = async () => {
    let tempCarMapListData = [];
    if (this.state.selectProvinceLabelStr.length < 1 && this.state.selectCityLabelStr.length < 1) {
      this.state.carMapListData?.map(i => {
        if (this.state.showOnlineCars) {
          if (i.enginestate === '2') {
            tempCarMapListData.push(i);
          }
        }
        if (this.state.showOfflineCars) {
          if (i.enginestate === '0') {
            tempCarMapListData.push(i);
          }
        }
      });
    } else {
      this.state.carMapListData?.map(i => {
        if (this.state.selectCityLabelStr.length > 0) {
          if (
            i.province === this.state.selectProvinceLabelStr &&
            i.city === this.state.selectCityLabelStr
          ) {
            if (this.state.showOnlineCars) {
              if (i.enginestate === '2') {
                tempCarMapListData.push(i);
              }
            }
            if (this.state.showOfflineCars) {
              if (i.enginestate === '0') {
                tempCarMapListData.push(i);
              }
            }
          }
        } else {
          if (this.state.selectProvinceLabelStr.length > 0) {
            if (i.province === this.state.selectProvinceLabelStr) {
              if (this.state.showOnlineCars) {
                if (i.enginestate === '2') {
                  tempCarMapListData.push(i);
                }
              }
              if (this.state.showOfflineCars) {
                if (i.enginestate === '0') {
                  tempCarMapListData.push(i);
                }
              }
            }
          }
        }
      });
    }
    await this.setState({
      displayCarMapListData: tempCarMapListData,
    });
  };

  // 更新点击定位时所计算的车辆的车辆（在最外层点击车辆定位时）
  updatePositionDataCarList = async (lng: number, lat: number) => {
    let tempCarMapListData = [];
    if (this.state.selectProvinceLabelStr.length < 1 && this.state.selectCityLabelStr.length < 1) {
      this.state.carMapListData?.map(i => {
        if (this.state.showOnlineCars) {
          if (i.enginestate === '2') {
            tempCarMapListData.push(i);
          }
        }
        if (this.state.showOfflineCars) {
          if (i.enginestate === '0') {
            tempCarMapListData.push(i);
          }
        }
      });
    } else {
      this.state.carMapListData?.map(i => {
        if (i.lat === lat && i.lon === lng) {
          if (this.state.showOnlineCars) {
            if (i.enginestate === '2') {
              tempCarMapListData.push(i);
            }
          }
          if (this.state.showOfflineCars) {
            if (i.enginestate === '0') {
              tempCarMapListData.push(i);
            }
          }
        } else if (this.state.selectCityLabelStr.length > 0) {
          if (
            i.province === this.state.selectProvinceLabelStr &&
            i.city === this.state.selectCityLabelStr
          ) {
            if (this.state.showOnlineCars) {
              if (i.enginestate === '2') {
                tempCarMapListData.push(i);
              }
            }
            if (this.state.showOfflineCars) {
              if (i.enginestate === '0') {
                tempCarMapListData.push(i);
              }
            }
          }
        } else {
          if (this.state.selectProvinceLabelStr.length > 0) {
            if (i.province === this.state.selectProvinceLabelStr) {
              if (this.state.showOnlineCars) {
                if (i.enginestate === '2') {
                  tempCarMapListData.push(i);
                }
              }
              if (this.state.showOfflineCars) {
                if (i.enginestate === '0') {
                  tempCarMapListData.push(i);
                }
              }
            }
          }
        }
      });
    }
    await this.setState({
      positionCarMapListData: tempCarMapListData,
    });
  };

  // 点击车辆弹框里的报警详情按钮
  clickCarPointErrorButton = vin => {
    this.setState({
      showAlarmByVinModal: true,
      alarmByVinUrlVin: vin,
    });
  };

  // 点击车辆弹框里的车辆信息按钮
  clickCarPointInfoButton = async (vin: string) => {
    await this.props.dispatch({
      type: 'vehicleInfoQuery/postFetchPage',
      payload: {
        url: '/vehicle/vehiclefindbypage',
        vin: vin,
        page: 0,
        size: 10,
      },
      callback: async data => {
        if (data.statusCode === '0') {
          await this.props.dispatch({
            type: 'vehicleInfoQuery/setVehicleInfo',
            payload: {
              ...data.data.list[0],
            },
          });
          this.setState({
            isModalOpen: true,
            modalOpenVin: vin,
          });
        }
      },
    });
  };

  // 点击车辆弹框里的历史轨迹按钮
  clickCarPointTrajectoryButton = carInfo => {
    const nowDate = new Date();
    this.props.dispatch({
      type: 'common/listGet',
      payload: {
        url: '/vehicle/findwheelpath',
        vin: carInfo.vin,
        searchDate: `${nowDate.getFullYear()}-${
          nowDate.getMonth() + 1 < 10 ? `0${nowDate.getMonth() + 1}` : nowDate.getMonth() + 1
        }-${nowDate.getDate() < 10 ? `0${nowDate.getDate()}` : nowDate.getDate()}`,
      },
      callback: async data => {
        if (data.statusCode === '0') {
          data.data?.map((i, index) => (i.title = index));
          this.setState({
            trajectoryListData: data.data,
          });
        } else {
          this.setState({
            trajectoryListData: [],
          });
        }
      },
    });
    this.setState({
      isTrajectoryModalOpen: true,
      trajectorySearchEndDate: `${nowDate.getFullYear()}-${
        nowDate.getMonth() + 1 < 10 ? `0${nowDate.getMonth() + 1}` : nowDate.getMonth() + 1
      }-${nowDate.getDate() < 10 ? `0${nowDate.getDate()}` : nowDate.getDate()}`,
      trajectoryModalCar: carInfo,
    });
    setTimeout(() => {
      this.initTrajectoryMap();
    }, 200);
  };

  removeMapCitiesAction = () => {
    this.map.off('click', this.citiesClickAction);
  };

  setMapCitiesAction = () => {
    this.map.on('click', this.citiesClickAction);
  };

  removeMapProvincesAction = () => {
    this.map.off('click', this.provincesClickAction);
  };

  setMapProvincesAction = () => {
    this.map.on('click', this.provincesClickAction);
  };

  setCitiesPoint = async provinceName => {
    const citiesData = await this.getPointCitiesData(provinceName);
    var markers = [];
    citiesData?.map(i => {
      let carsNumber = 0;
      this.state.carMapCityRankData?.map(e => {
        if (i.name === e.city) {
          if (this.state.showOnlineCars) {
            carsNumber += e.online;
          }
          if (this.state.showOfflineCars) {
            carsNumber += e.offline;
          }
        }
      });

      var marker = new AMap.LabelMarker({
        name: i.name,
        position: [i.center.lng, i.center.lat],
        zIndex: 1,
        text: {
          content: i.name + ': ' + carsNumber,
          direction: 'center',
          style: {
            fontSize: 12,
            fontWeight: 'normal',
            fillColor: '#fff',
            padding: '2, 5',
            backgroundColor: '#288CFE',
            borderColor: '#fff',
            borderWidth: 1,
          },
        },
      });
      marker.on('click', this.citiesClickAction);
      markers.push(marker);
    });
    return markers;
  };

  getPointCitiesData = async provinceName => {
    var citiesData = [];
    await new Promise((resolve, reject) => {
      AMap.plugin('AMap.DistrictSearch', function () {
        var districtSearch = new AMap.DistrictSearch({
          // 关键字对应的行政区级别，country表示国家
          level: 'province',
          //  显示下级行政区级数，1表示返回下一级行政区
          subdistrict: 1,
        });

        // 搜索所有省/直辖市信息
        districtSearch.search(provinceName, function (status, result) {
          // 查询成功时，result即为对应的行政区信息
          citiesData = result.districtList[0].districtList;
          resolve();
        });
      });
    });
    return citiesData;
  };

  getPointProvinceName = async (lng, lat) => {
    var provinceName = '';
    await new Promise((resolve, reject) => {
      AMap.plugin('AMap.Geocoder', async function () {
        var geocoder = new AMap.Geocoder({
          // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
          city: '全国',
        });

        var lnglat = [lng, lat];

        geocoder.getAddress(lnglat, function (status, result) {
          if (status === 'complete' && result.info === 'OK') {
            // result为对应的地理位置详细信息
            provinceName = result.regeocode.addressComponent.province;
            resolve();
          }
        });
      });
    });
    return provinceName;
  };

  getPointCityName = async (lng, lat) => {
    var cityName = '';
    await new Promise((resolve, reject) => {
      AMap.plugin('AMap.Geocoder', async function () {
        var geocoder = new AMap.Geocoder({
          // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
          city: '全国',
        });

        var lnglat = [lng, lat];

        geocoder.getAddress(lnglat, function (status, result) {
          if (status === 'complete' && result.info === 'OK') {
            // result为对应的地理位置详细信息
            if (result.regeocode.addressComponent.city.length < 1) {
              cityName = result.regeocode.addressComponent.district;
            } else {
              cityName = result.regeocode.addressComponent.city;
            }
            resolve();
          }
        });
      });
    });
    return cityName;
  };

  setProvincesPoint = () => {
    const markers = [];
    provinceData.map(i => {
      let carsNumber = 0;
      this.state.carMapProvinceRankData?.map(e => {
        if (i.name === e.province) {
          if (this.state.showOnlineCars) {
            carsNumber += e.online;
          }
          if (this.state.showOfflineCars) {
            carsNumber += e.offline;
          }
        }
      });

      const marker = new AMap.LabelMarker({
        name: i.name,
        position: i.center,
        zIndex: 1,
        text: {
          content: i.name + ': ' + carsNumber,
          direction: 'center',
          style: {
            fontSize: 12,
            fontWeight: 'normal',
            fillColor: '#fff',
            padding: '2, 5',
            backgroundColor: '#288CFE',
            borderColor: '#fff',
            borderWidth: 1,
          },
        },
      });
      marker.on('click', this.provincesClickAction);
      markers.push(marker);
    });
    return markers;
  };

  provincesClickAction = async params => {
    if (this.cluster) {
      this.cluster.setMap(null);
    }
    this.map.clearMap();
    const provinceName = await this.getPointProvinceName(params.lnglat.lng, params.lnglat.lat);

    await this.setState({
      selectPlaceData: provinceName,
      selectProvinceLabelStr: provinceName,
    });
    this.getCarMapCount();
    await this.getCarMapCityRank();

    this.map.setCity(provinceName);
    this.mapLayer.clear();
    const markers = await this.setCitiesPoint(provinceName);
    this.mapLayer.add(markers);
    this.removeMapProvincesAction();
    this.setMapCitiesAction();
    await this.updateDisplayCarList();
  };

  citiesClickAction = async params => {
    if (this.cluster) {
      this.cluster.setMap(null);
    }
    this.map.clearMap();
    const cityName = await this.getPointCityName(params.lnglat.lng, params.lnglat.lat);
    this.map.setCity(cityName);
    this.mapLayer.clear();
    this.removeMapProvincesAction();
    this.removeMapCitiesAction();
    await this.setState({
      selectPlaceData: cityName,
      selectCityLabelStr: cityName,
    });
    await this.updateDisplayCarList();

    const carsPoint = this.setCarsPoint();
    this.map.add(carsPoint);

    const count = carsPoint.length;
    var _renderClusterMarker = function (context) {
      var factor = Math.pow(context.count / count, 1 / 18);
      var div = document.createElement('div');
      var Hue = 180 - factor * 180;
      var bgColor = 'hsla(' + Hue + ',100%,50%,0.7)';
      var fontColor = 'hsla(' + Hue + ',100%,20%,1)';
      var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
      var shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
      div.style.backgroundColor = bgColor;
      var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
      div.style.width = div.style.height = size + 'px';
      div.style.border = 'solid 1px ' + borderColor;
      div.style.borderRadius = size / 2 + 'px';
      div.style.boxShadow = '0 0 1px ' + shadowColor;
      div.innerHTML = context.count;
      div.style.lineHeight = size + 'px';
      div.style.color = fontColor;
      div.style.fontSize = '14px';
      div.style.textAlign = 'center';
      context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
      context.marker.setContent(div);
    };

    const self = this;
    this.map.plugin(['AMap.MarkerClusterer'], function () {
      self.cluster = new AMap.MarkerClusterer(
        self.map, // 地图实例
        carsPoint, // 海量点组成的数组
        { renderClusterMarker: _renderClusterMarker, gridSize: 80 },
      );
    });
  };

  setCarsPoint = () => {
    var markers = [];
    this.state.displayCarMapListData?.map(i => {
      if (i.lat && i.lon) {
        var marker;
        let carNo = i.licence ?? '';
        let vin = i.vin ?? '';
        let brand = i.brand ?? '';
        let series = i.seriesName ?? '';
        let carModel = i.typeName ?? '';
        let carStatus = i.enginestate === '2' ? '在线' : i.enginestate === '0' ? '离线' : '故障';
        let carSpeed = '';
        let carSOC = '';
        let infoWindowFontStyle = 'font-size: 12px; color: black';
        let infoWindowItemStyle =
          'width: 60px; height: 24px; border-radius: 4px; background-color: #1ABC9C; display: flex; align-items: center; justify-content: center; font-size: 6px; color: white; margin-right: 10px';
        let infoWindowItemStyle2 =
          'width: 60px; height: 24px; border-radius: 4px; background-color: #1ABC9C; display: flex; align-items: center; justify-content: center; font-size: 6px; color: white';
        let showErrorButton = i.faultNum;
        global.mapMonitoringClickCarPointErrorButton = vin => {
          this.clickCarPointErrorButton(vin);
        };
        global.mapMonitoringClickCarPointInfoButton = vin => {
          this.clickCarPointInfoButton(vin);
        };
        global.mapMonitoringClickCarPointTrajectoryButton = vin => {
          let carInfo;
          this.state.displayCarMapListData.map(tempI => {
            if (tempI.vin === vin) {
              carInfo = tempI;
            }
          });
          this.clickCarPointTrajectoryButton(carInfo);
        };
        let infoWindowContent = `<div style="display: flex; flex-direction: column"><div style="${infoWindowFontStyle}">车牌号码：${carNo}</div><div style="${infoWindowFontStyle}">VIN码：${vin}</div><div style="${infoWindowFontStyle}">品牌：${brand}</div><div style="${infoWindowFontStyle}">车系：${series}</div><div style="${infoWindowFontStyle}">车型：${carModel}</div><div style="${infoWindowFontStyle}">车辆状态：${carStatus}</div><div style="${infoWindowFontStyle}">车速：${carSpeed}</div><div style="${infoWindowFontStyle}">SOC：${carSOC}</div><div style="display: flex; flex-direction: row; align-items: center">${
          showErrorButton
            ? `<div style="${infoWindowItemStyle}" onclick=mapMonitoringClickCarPointErrorButton("${vin}")>报警详情</div>`
            : ''
        }<div style="${infoWindowItemStyle}" onclick=mapMonitoringClickCarPointInfoButton("${vin}")>车辆信息</div><div style="${infoWindowItemStyle2}" onclick=mapMonitoringClickCarPointTrajectoryButton("${vin}")>历史轨迹</div></div></div>`;
        let infoWindow = new AMap.InfoWindow({
          position: [i.lon, i.lat],
          offset: new AMap.Pixel(0, -30),
          content: infoWindowContent,
        });

        if (i.faultNum) {
          marker = this.initErrorMarker(i.vin, i.lon, i.lat, i.maxalarmlevel);
        } else {
          if (i.enginestate === '2') {
            marker = this.initNormalCarMarker(i.vin, i.lon, i.lat);
          } else if (i.enginestate === '0') {
            marker = this.initParkMarker(i.vin, i.lon, i.lat);
          }
        }
        marker.on('click', params => {
          infoWindow.open(this.map);
        });
        markers.push(marker);
      }
    });
    return markers;
  };

  setPositionPoint = () => {
    var markers = [];
    this.state.positionCarMapListData?.map(i => {
      if (i.lat && i.lon) {
        var marker;
        let carNo = i.licence ?? '';
        let vin = i.vin ?? '';
        let brand = i.brand ?? '';
        let series = i.seriesName ?? '';
        let carModel = i.typeName ?? '';
        let carStatus = i.enginestate === '2' ? '在线' : i.enginestate === '0' ? '离线' : '故障';
        let carSpeed = '';
        let carSOC = '';
        let infoWindowFontStyle = 'font-size: 12px; color: black';
        let infoWindowItemStyle =
          'width: 60px; height: 24px; border-radius: 4px; background-color: #1ABC9C; display: flex; align-items: center; justify-content: center; font-size: 6px; color: white; margin-right: 10px';
        let infoWindowItemStyle2 =
          'width: 60px; height: 24px; border-radius: 4px; background-color: #1ABC9C; display: flex; align-items: center; justify-content: center; font-size: 6px; color: white';
        let showErrorButton = i.faultNum;
        global.mapMonitoringClickCarPointErrorButton = vin => {
          this.clickCarPointErrorButton(vin);
        };
        global.mapMonitoringClickCarPointInfoButton = vin => {
          this.clickCarPointInfoButton(vin);
        };
        global.mapMonitoringClickCarPointTrajectoryButton = vin => {
          let carInfo;
          this.state.displayCarMapListData.map(tempI => {
            if (tempI.vin === vin) {
              carInfo = tempI;
            }
          });
          this.clickCarPointTrajectoryButton(carInfo);
        };
        let infoWindowContent = `<div style="display: flex; flex-direction: column"><div style="${infoWindowFontStyle}">车牌号码：${carNo}</div><div style="${infoWindowFontStyle}">VIN码：${vin}</div><div style="${infoWindowFontStyle}">品牌：${brand}</div><div style="${infoWindowFontStyle}">车系：${series}</div><div style="${infoWindowFontStyle}">车型：${carModel}</div><div style="${infoWindowFontStyle}">车辆状态：${carStatus}</div><div style="${infoWindowFontStyle}">车速：${carSpeed}</div><div style="${infoWindowFontStyle}">SOC：${carSOC}</div><div style="display: flex; flex-direction: row; align-items: center">${
          showErrorButton
            ? `<div style="${infoWindowItemStyle}" onclick=mapMonitoringClickCarPointErrorButton("${vin}")>报警详情</div>`
            : ''
        }<div style="${infoWindowItemStyle}" onclick=mapMonitoringClickCarPointInfoButton("${vin}")>车辆信息</div><div style="${infoWindowItemStyle2}" onclick=mapMonitoringClickCarPointTrajectoryButton("${vin}")>历史轨迹</div></div></div>`;
        let infoWindow = new AMap.InfoWindow({
          position: [i.lon, i.lat],
          offset: new AMap.Pixel(0, -30),
          content: infoWindowContent,
        });

        if (i.faultNum) {
          marker = this.initErrorMarker(i.vin, i.lon, i.lat, i.maxalarmlevel);
        } else {
          if (i.enginestate === '2') {
            marker = this.initNormalCarMarker(i.vin, i.lon, i.lat);
          } else if (i.enginestate === '0') {
            marker = this.initParkMarker(i.vin, i.lon, i.lat);
          }
        }
        marker.on('click', params => {
          infoWindow.open(this.map);
        });
        markers.push(marker);
      }
    });
    return markers;
  };

  initNormalCarMarker = (vin, lng, lat) => {
    var content =
      '<div style="display: flex; align-items: center; justify-content: center; font-size: 10px; color: white; width: 20px; height: 20px; background-color: #19B74A; border-radius: 10px"><img style="width: 16px; height: 16px" src="" /></div>';
    return new AMap.Marker({
      id: vin,
      content: content, // 自定义点标记覆盖物内容
      position: [lng, lat], // 基点位置
      offset: new AMap.Pixel(-10, -20),
    });
  };

  initErrorMarker = (vin, lng, lat, level) => {
    var content = `<div style="display: flex; align-items: center; justify-content: center; font-size: 10px; color: white; width: 20px; height: 20px; background-color: #D9001B; border-radius: 10px">${level}</div>`;
    return new AMap.Marker({
      id: vin,
      content: content, // 自定义点标记覆盖物内容
      position: [lng, lat], // 基点位置
      offset: new AMap.Pixel(-10, -20),
    });
  };

  initParkMarker = (vin, lng, lat) => {
    var icon = new AMap.Icon({
      size: new AMap.Size(20, 20), // 图标尺寸
      image: park_icon, // Icon的图像
      imageSize: new AMap.Size(20, 20), // 根据所设置的大小拉伸或压缩图片
    });
    return new AMap.Marker({
      id: vin,
      icon: icon, // 添加 Icon 实例
      position: new AMap.LngLat(lng, lat),
      offset: new AMap.Pixel(-10, -20),
    });
  };

  initMap = () => {
    this.map = new AMap.Map('map', {
      zoom: 4,
      center: [116.412427, 32.303573],
      pitch: 0,
      viewMode: '3D',
    });
    this.mapLayer = new AMap.LabelsLayer({
      zooms: [3, 20],
      zIndex: 1000,
      collision: false,
      allowCollision: false,
    });
    this.mapLayer.setMap(this.map);

    const self = this;
    // 同时引入工具条插件，比例尺插件和鹰眼插件
    AMap.plugin(['AMap.ToolBar'], function () {
      // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
      var toolbar = new AMap.ToolBar({
        position: 'RB',
        locate: false,
        direction: false,
        noIpLocate: true,
      });
      self.map.addControl(toolbar);
    });
  };

  resetMap = async () => {
    if (this.cluster) {
      this.cluster.setMap(null);
    }
    this.map.clearMap();
    this.map.setZoomAndCenter(4, [116.412427, 32.303573]);
    this.removeMapCitiesAction();
    this.removeMapProvincesAction();
    this.mapLayer.clear();
    const provincesPoint = this.setProvincesPoint();
    this.mapLayer.add(provincesPoint);
    this.setMapProvincesAction();
    await this.setState({
      selectPlaceData: '全国',
      selectProvinceLabelStr: '',
      selectCityLabelStr: '',
    });
    this.getCarMapCount();
    await this.updateDisplayCarList();
  };

  toThousands = number => {
    if (number === 'miss' || number !== number) {
      number = 0;
    }
    number = Number(number); //不转数字,"0.0"会转成".0"
    if (number !== 0) {
      //等于0的时候返回0
      let arr = String(number).split('.');
      let num = arr[0];
      let len = Math.ceil(num.length / 3) * 3;
      let result = num.padStart(len, '0').match(/\d{3}/g).join(',').replace(/^0+/, '');
      return arr[1] ? result + '.' + arr[1] : result;
    } else {
      return 0;
    }
  };

  initTrajectoryMap = () => {
    this.trajectoryMap = new AMap.Map('trajectoryMap', {
      resizeEnable: true,
      zoom: 17,
    });
  };

  startTrajectoryAnimation = () => {
    const points = this.state.trajectoryLineArr?.map(i => [i.lon, i.lat]);
    this.trajectoryMarker.moveAlong(points, 200);
  };

  moveToLocation = () => {
    const self = this;
    this.map.plugin('AMap.Geolocation', () => {
      const geolocation = new AMap.Geolocation({});
      geolocation.getCurrentPosition((status, position) => {
        if (status === 'complete') {
          self.map.setCenter([position.position.lng, position.position.lat]);
        } else {
          message.error('定位失败，请检查定位权限或更换浏览器');
        }
      });
    });
  };

  render() {
    const options = [
      { label: '在线', value: 'online' },
      { label: '离线', value: 'offline' },
    ];
    const { RangePicker } = DatePicker;
    return (
      <div className={styles.root}>
        <div id={'map'} className={styles.mapView} />
        <div onClick={() => this.moveToLocation()} className={styles.locationView}>
          <img className={styles.locationImg} src={location_img} />
        </div>
        <div className={styles.infoView}>
          <div className={styles.searchView}>
            <div className={styles.searchItemBackView}>
              <div className={styles.searchItem}>
                <div className={styles.searchItemTitle}>VIN</div>
                <Input
                  maxLength={17}
                  placeholder="请输入VIN码"
                  value={this.state.inputVin}
                  allowClear
                  onChange={value => {
                    this.setState({
                      inputVin: value.target.value,
                    });
                  }}
                />
              </div>
              {this.state.searchMoreOpen ? (
                <div style={{ display: 'flex', flexDirection: 'column' }}>
                  <div className={styles.searchItem} style={{ marginTop: '10px' }}>
                    <div className={styles.searchItemTitle}>车牌号码</div>
                    <Input
                      maxLength={10}
                      placeholder="请输入车牌号码"
                      value={this.state.inputCarNo}
                      allowClear
                      onChange={value => {
                        this.setState({
                          inputCarNo: value.target.value,
                        });
                      }}
                    />
                  </div>
                  <div className={styles.searchItem} style={{ marginTop: '10px' }}>
                    <div className={styles.searchItemTitle}>品牌</div>
                    <Select
                      placeholder="请选择品牌"
                      style={{ width: '200px' }}
                      allowClear
                      value={this.state.inputBrand}
                      options={this.state.displayBrandData}
                      onChange={(value, option) => {
                        let tempDisplaySeriesData = [];
                        let tempDisplayModelData = [];
                        if (value !== undefined) {
                          this.state.allSeriesData?.map(i => {
                            if (i.brandId === value) {
                              tempDisplaySeriesData.push({
                                value: i.seriesId,
                                label: i.seriesName,
                              });
                            }
                          });
                          this.state.allModelData?.map(i => {
                            if (i.brandId === value) {
                              tempDisplayModelData.push({
                                value: i.code,
                                label: i.name,
                              });
                            }
                          });
                        } else {
                          this.state.allSeriesData?.map(i => {
                            tempDisplaySeriesData.push({
                              value: i.seriesId,
                              label: i.seriesName,
                            });
                          });
                          this.state.allModelData?.map(i => {
                            tempDisplayModelData.push({
                              value: i.code,
                              label: i.name,
                            });
                          });
                        }
                        this.setState({
                          inputBrand: option?.label,
                          displaySeriesData: tempDisplaySeriesData,
                          displayModelData: tempDisplayModelData,
                          inputSeries: undefined,
                          inputModel: undefined,
                        });
                      }}
                    />
                  </div>
                  <div className={styles.searchItem} style={{ marginTop: '10px' }}>
                    <div className={styles.searchItemTitle}>车系</div>
                    <Select
                      placeholder="请选择车系"
                      style={{ width: '200px' }}
                      allowClear
                      value={this.state.inputSeries}
                      options={this.state.displaySeriesData}
                      onChange={(value, option) => {
                        let tempDisplayModelData = [];
                        if (value !== undefined) {
                          this.state.allModelData?.map(i => {
                            if (i.seriesCode === value) {
                              tempDisplayModelData.push({
                                value: i.code,
                                label: i.name,
                              });
                            }
                          });
                        } else {
                          this.state.allModelData?.map(i => {
                            tempDisplayModelData.push({
                              value: i.code,
                              label: i.name,
                            });
                          });
                        }
                        this.setState({
                          inputSeries: option?.label,
                          displayModelData: tempDisplayModelData,
                          inputModel: undefined,
                        });
                      }}
                    />
                  </div>
                  <div className={styles.searchItem} style={{ marginTop: '10px' }}>
                    <div className={styles.searchItemTitle}>车型</div>
                    <Select
                      placeholder="请选择车型"
                      style={{ width: '200px' }}
                      allowClear
                      value={this.state.inputModel}
                      options={this.state.displayModelData}
                      onChange={(value, option) => {
                        this.setState({
                          inputModel: option?.label,
                        });
                      }}
                    />
                  </div>
                </div>
              ) : null}
            </div>
            <div className={styles.searchButtonView}>
              <div onClick={() => this.startSearch()} className={styles.searchButtonViewItem}>
                查询
              </div>
              <div
                onClick={() => this.setState({ searchMoreOpen: !this.state.searchMoreOpen })}
                className={styles.searchButtonViewItem2}
              >
                {this.state.searchMoreOpen ? '隐藏' : '展开'}
              </div>
            </div>
          </div>
          <div className={styles.infoViewItem}>
            <div className={styles.infoViewItemTitle}>地区</div>
            <div className={styles.infoViewItemValue}>
              <Cascader
                style={{ width: '120px', fontSize: '12px', textAlign: 'center' }}
                options={this.state.allSelectData}
                expandTrigger="hover"
                changeOnSelect
                allowClear={false}
                bordered={false}
                value={this.state.selectPlaceData}
                displayRender={(labels: string[]) => labels[labels.length - 1]}
                onChange={async (e, opts) => {
                  const provinceName = e[e.length - 1];
                  const selectPlaceData = opts[opts.length - 1].label;
                  this.setState({
                    selectPlaceData: selectPlaceData,
                  });
                  this.map.setCity(provinceName);
                  if (e.length === 1) {
                    if (e[0] === '100000') {
                      this.resetMap();

                      // 用于请求右上角统计数据
                      await this.setState({
                        selectProvinceLabelStr: '',
                        selectCityLabelStr: '',
                      });
                      this.getCarMapCount();
                      await this.updateDisplayCarList();
                    } else {
                      // 用于请求右上角统计数据
                      await this.setState({
                        selectProvinceLabelStr: opts[0].label,
                        selectCityLabelStr: '',
                      });
                      this.getCarMapCount();
                      await this.getCarMapCityRank();
                      await this.updateDisplayCarList();

                      if (this.cluster) {
                        this.cluster.setMap(null);
                      }
                      this.map.clearMap();
                      this.mapLayer.clear();
                      const markers = await this.setCitiesPoint(provinceName);
                      this.mapLayer.add(markers);
                      this.removeMapProvincesAction();
                      this.setMapCitiesAction();
                    }
                  } else {
                    // 用于请求右上角统计数据
                    await this.setState({
                      selectProvinceLabelStr: opts[0].label,
                      selectCityLabelStr: opts[1].label,
                    });
                    this.getCarMapCount();
                    await this.updateDisplayCarList();

                    const cityName = e[e.length - 1];
                    this.map.setCity(cityName);
                    if (this.cluster) {
                      this.cluster.setMap(null);
                    }
                    this.mapLayer.clear();
                    this.map.clearMap();
                    this.removeMapProvincesAction();
                    this.removeMapCitiesAction();
                    const carsPoint = this.setCarsPoint();
                    this.map.add(carsPoint);

                    const count = carsPoint.length;
                    var _renderClusterMarker = function (context) {
                      var factor = Math.pow(context.count / count, 1 / 18);
                      var div = document.createElement('div');
                      var Hue = 180 - factor * 180;
                      var bgColor = 'hsla(' + Hue + ',100%,50%,0.7)';
                      var fontColor = 'hsla(' + Hue + ',100%,20%,1)';
                      var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
                      var shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
                      div.style.backgroundColor = bgColor;
                      var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
                      div.style.width = div.style.height = size + 'px';
                      div.style.border = 'solid 1px ' + borderColor;
                      div.style.borderRadius = size / 2 + 'px';
                      div.style.boxShadow = '0 0 1px ' + shadowColor;
                      div.innerHTML = context.count;
                      div.style.lineHeight = size + 'px';
                      div.style.color = fontColor;
                      div.style.fontSize = '14px';
                      div.style.textAlign = 'center';
                      context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
                      context.marker.setContent(div);
                    };

                    const self = this;
                    this.map.plugin(['AMap.MarkerClusterer'], function () {
                      self.cluster = new AMap.MarkerClusterer(
                        self.map, // 地图实例
                        carsPoint, // 海量点组成的数组
                        { renderClusterMarker: _renderClusterMarker, gridSize: 80 },
                      );
                    });
                  }
                }}
              />
            </div>
          </div>
          <div className={styles.infoViewItem}>
            <div className={styles.infoViewItemTitle}>在线车辆</div>
            <div className={styles.infoViewItemValue}>{this.state.onlineCars}</div>
          </div>
          <div className={styles.infoViewItem}>
            <div className={styles.infoViewItemTitle}>离线车辆</div>
            <div className={styles.infoViewItemValue}>{this.state.offlineCars}</div>
          </div>
          <div
            onClick={() => {
              this.setState({
                showAlarmModal: true,
              });
            }}
            className={styles.infoViewItem}
          >
            <div className={styles.infoViewItemTitle}>平台报警数</div>
            <div className={styles.infoViewItemValueRed}>{this.state.alarmCount}</div>
          </div>
          <div className={styles.infoViewItem2}>
            <div onClick={() => this.resetMap()} className={styles.backButton}>
              返回
            </div>
          </div>
        </div>
        <div
          onClick={() => {
            this.setState({
              openCarList: true,
            });
          }}
          className={styles.carListShowView}
        >
          <img className={styles.carListShowViewImg} src={arrow_right_black_icon} />
        </div>
        {this.state.openCarList ? (
          <div className={styles.carListView}>
            <div
              onClick={() => {
                this.setState({
                  openCarList: false,
                });
              }}
              className={styles.carListHideView}
            >
              <img className={styles.carListHideViewImg} src={arrow_left_black_icon} />
            </div>
            <div className={styles.carListTitle}>车辆列表</div>
            <div className={styles.carListCarStatusSelectView}>
              <Checkbox.Group
                options={options}
                defaultValue={['online', 'offline']}
                onChange={async params => {
                  let tempOnline = false;
                  let tempOffline = false;
                  params?.map(i => {
                    if (i === 'online') {
                      tempOnline = true;
                    }
                    if (i === 'offline') {
                      tempOffline = true;
                    }
                  });
                  let tempDisplayCarMapListData = [];
                  if (tempOnline) {
                    this.state.carMapListData?.map(i => {
                      if (i.enginestate === '2') {
                        tempDisplayCarMapListData.push(i);
                      }
                    });
                  }
                  if (tempOffline) {
                    this.state.carMapListData?.map(i => {
                      if (i.enginestate === '0') {
                        tempDisplayCarMapListData.push(i);
                      }
                    });
                  }
                  await this.setState({
                    showOnlineCars: tempOnline,
                    showOfflineCars: tempOffline,
                    displayCarMapListData: tempDisplayCarMapListData,
                  });
                }}
              />
            </div>
            <div className={styles.carListBackView}>
              <List
                itemLayout="vertical"
                pagination={{
                  onChange: page => {
                    console.log(page);
                  },
                  size: 'small',
                  pageSize: 3,
                }}
                dataSource={this.state.displayCarMapListData}
                bordered
                renderItem={item => (
                  <List.Item key={item.title}>
                    <div className={styles.carListViewItem}>
                      <div className={styles.carListViewItemStatus}>
                        [{item.enginestate === '2' ? '在线' : '离线'}]
                      </div>
                      <div className={styles.carListViewItemContentView}>VIN码：{item.vin}</div>
                      <div className={styles.carListViewItemContentView}>
                        车牌号码：{item.licence}
                      </div>
                      <div className={styles.carListViewItemContentView}>
                        车系：{item.seriesName}
                      </div>
                      <div className={styles.carListViewItemContentView}>车型：{item.typeName}</div>
                      {/*<div className={styles.carListViewItemContentView}>*/}
                      {/*  最后在线时间：2022/9/22 13:40:51(接口暂未提供)*/}
                      {/*</div>*/}
                      <div className={styles.carListViewItemButtonView}>
                        <div
                          onClick={async () => {
                            if (item.lon && item.lat) {
                              this.map.setZoomAndCenter(20, [item.lon, item.lat]);
                              if (this.cluster) {
                                this.cluster.setMap(null);
                              }
                              this.map.clearMap();
                              const provinceName = await this.getPointProvinceName(
                                item.lon,
                                item.lat,
                              );
                              const cityName = await this.getPointCityName(item.lon, item.lat);
                              this.map.setZoomAndCenter(20, [item.lon, item.lat]);
                              this.mapLayer.clear();
                              this.removeMapProvincesAction();
                              this.removeMapCitiesAction();
                              await this.setState({
                                selectProvinceLabelStr: provinceName,
                                selectCityLabelStr: cityName,
                                selectPlaceData: cityName,
                              });
                              await this.updatePositionDataCarList(item.lon, item.lat);
                              const carsPoint = this.setPositionPoint();
                              this.map.add(carsPoint);
                              this.getCarMapCount();
                              const count = carsPoint.length;
                              var _renderClusterMarker = function (context) {
                                var factor = Math.pow(context.count / count, 1 / 18);
                                var div = document.createElement('div');
                                var Hue = 180 - factor * 180;
                                var bgColor = 'hsla(' + Hue + ',100%,50%,0.7)';
                                var fontColor = 'hsla(' + Hue + ',100%,20%,1)';
                                var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
                                var shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
                                div.style.backgroundColor = bgColor;
                                var size = Math.round(
                                  30 + Math.pow(context.count / count, 1 / 5) * 20,
                                );
                                div.style.width = div.style.height = size + 'px';
                                div.style.border = 'solid 1px ' + borderColor;
                                div.style.borderRadius = size / 2 + 'px';
                                div.style.boxShadow = '0 0 1px ' + shadowColor;
                                div.innerHTML = context.count;
                                div.style.lineHeight = size + 'px';
                                div.style.color = fontColor;
                                div.style.fontSize = '14px';
                                div.style.textAlign = 'center';
                                context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
                                context.marker.setContent(div);
                              };

                              const self = this;
                              this.map.plugin(['AMap.MarkerClusterer'], function () {
                                self.cluster = new AMap.MarkerClusterer(
                                  self.map, // 地图实例
                                  carsPoint, // 海量点组成的数组
                                  { renderClusterMarker: _renderClusterMarker, gridSize: 80 },
                                );
                              });

                              setTimeout(() => {
                                let tempMarker = null;
                                this.map.getAllOverlays('marker').map(i => {
                                  if (i.w.id === item.vin) {
                                    tempMarker = i;
                                  }
                                });
                                tempMarker?.emit('click');
                              }, 500);
                            }
                          }}
                          className={styles.carListViewItemButtonViewItem}
                        >
                          车辆定位
                        </div>
                        <div
                          onClick={async () => {
                            await this.clickCarPointInfoButton(item.vin);
                          }}
                          className={styles.carListViewItemButtonViewItem}
                        >
                          车辆信息
                        </div>
                        <div
                          onClick={() => {
                            this.clickCarPointTrajectoryButton(item);
                          }}
                          className={styles.carListViewItemButtonViewItem}
                        >
                          历史轨迹
                        </div>
                      </div>
                    </div>
                  </List.Item>
                )}
              />
            </div>
          </div>
        ) : null}
        {this.state.isModalOpen ? (
          <Modal
            title=""
            visible={true}
            centered
            width="100%"
            bodyStyle={{ maxHeight: '700px' }}
            footer={null}
            onCancel={() => this.setState({ isModalOpen: false })}
            onOk={() => this.setState({ isModalOpen: false })}
          >
            <Tabs
              defaultActiveKey="1"
              onChange={e => {
                if (e === '2') {
                  setTimeout(() => {
                    this.props.dispatch({
                      type: 'common/listGet',
                      payload: {
                        url: '/usertravel/batteryMonitoring',
                        vin: this.state.modalOpenVin,
                      },
                      callback: async data => {
                        if (data.statusCode === '0') {
                          await this.setState({
                            batteryMonitoringData: data.data,
                          });
                        }
                        this.setSOCEchart();
                        this.setTempEchart();
                        this.setSingleVoltageEchart();
                        this.setSingleTempEchart();
                      },
                    });
                  }, 100);
                } else if (e === '3') {
                  setTimeout(() => {
                    const nowDateYear = new Date().getFullYear();
                    const nowDateMonth = new Date().getMonth() + 1;
                    this.props.dispatch({
                      type: 'common/listGet',
                      payload: {
                        url: '/usertravel/carUseInfo',
                        vin: this.state.modalOpenVin,
                        ym: `${nowDateYear}-${
                          nowDateMonth < 10 ? `0${nowDateMonth}` : nowDateMonth
                        }`,
                      },
                      callback: async data => {
                        if (data.statusCode === '0') {
                          await this.setState({
                            carUseInfoData: data.data,
                          });
                        }
                        this.setDailyMileageEchart();
                        this.setDailyChargeEchart();
                      },
                    });
                  }, 100);
                }
              }}
            >
              <Tabs.TabPane tab="车辆信息" key="1">
                <div className={styles.modalMainView}>
                  <VehicleTab />
                </div>
              </Tabs.TabPane>
              <Tabs.TabPane tab="电池监控" key="2">
                <div className={styles.modalMainView}>
                  <div className={styles.SOCTitleView}>
                    <div className={styles.SOCTitleViewTitle}>
                      当前SOC {this.state.batteryMonitoringData?.batteryCurrentInfo?.soc ?? '0'}%
                    </div>
                    <div className={styles.SOCTitleViewDetail}>
                      <div className={styles.SOCTitleViewDetailAutoRefresh}>
                        <Checkbox
                          onChange={e => {
                            if (e.target.checked) {
                              clearInterval(this.autoRefreshEchartTimer);
                              this.autoRefreshEchartTimer = setInterval(timer => {
                                this.setState({
                                  refreshEchart: true,
                                });
                                this.props.dispatch({
                                  type: 'common/listGet',
                                  payload: {
                                    url: '/usertravel/batteryMonitoring',
                                    vin: this.state.modalOpenVin,
                                  },
                                  callback: async data => {
                                    if (data.statusCode === '0') {
                                      await this.setState({
                                        batteryMonitoringData: data.data,
                                        refreshEchart: false,
                                      });
                                    }
                                    this.setSOCEchart();
                                    this.setTempEchart();
                                    this.setSingleVoltageEchart();
                                    this.setSingleTempEchart();
                                  },
                                });
                              }, 300000);
                            } else {
                              clearInterval(this.autoRefreshEchartTimer);
                            }
                          }}
                        >
                          自动刷新
                        </Checkbox>
                      </div>
                      <div className={styles.SOCTitleViewDetailRefreshButton}>
                        <Button
                          onClick={() => {
                            this.setState({
                              refreshEchart: true,
                            });
                            this.props.dispatch({
                              type: 'common/listGet',
                              payload: {
                                url: '/usertravel/batteryMonitoring',
                                vin: this.state.modalOpenVin,
                              },
                              callback: async data => {
                                if (data.statusCode === '0') {
                                  await this.setState({
                                    batteryMonitoringData: data.data,
                                    refreshEchart: false,
                                  });
                                }
                                this.setSOCEchart();
                                this.setTempEchart();
                                this.setSingleVoltageEchart();
                                this.setSingleTempEchart();
                              },
                            });
                          }}
                          loading={this.state.refreshEchart}
                        >
                          刷新
                        </Button>
                      </div>
                    </div>
                  </div>
                  <div className={styles.modalMainViewEchartView}>
                    <div className={styles.lineEchart} id={'SOCEchart'} />
                    <div className={styles.lineEchart} id={'TempEchart'} />
                  </div>
                  {
                    <div style={{ display: 'flex', flexDirection: 'column' }}>
                      {this.state.batteryMonitoringData?.batteryCurrentInfo?.energyStorageVoList?.map(
                        (i, index) => {
                          return (
                            <div
                              key={`energyStorageVoListItem${index}`}
                              style={{ display: 'flex', flexDirection: 'column' }}
                            >
                              <div className={styles.modalMainViewEchartTitleView}>
                                <div className={styles.modalMainViewEchartTitleViewTitle}>
                                  单个电池电压（V）
                                </div>
                                <div className={styles.modalMainViewEchartTitleViewDetail}>
                                  <div className={styles.modalMainViewEchartTitleViewDetailItem}>
                                    <div
                                      className={styles.modalMainViewEchartTitleViewDetailItemTitle}
                                    >
                                      单体最高电压：
                                      {Math.max(...i.batteryVoltageList)}V
                                    </div>
                                    <div
                                      className={
                                        styles.modalMainViewEchartTitleViewDetailItemDetail
                                      }
                                    >
                                      单体序号：
                                      {i.batteryVoltageList
                                        ?.map(item => item)
                                        .indexOf(Math.max(...i.batteryVoltageList).toString()) + 1}
                                    </div>
                                  </div>
                                  <div className={styles.modalMainViewEchartTitleViewDetailItem}>
                                    <div
                                      className={styles.modalMainViewEchartTitleViewDetailItemTitle}
                                    >
                                      单体最低电压：{Math.min(...i.batteryVoltageList)}V
                                    </div>
                                    <div
                                      className={
                                        styles.modalMainViewEchartTitleViewDetailItemDetail
                                      }
                                    >
                                      单体序号：
                                      {i.batteryVoltageList
                                        ?.map(item => item)
                                        .indexOf(Math.min(...i.batteryVoltageList).toString()) + 1}
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div className={styles.modalMainViewEchartView}>
                                <div
                                  className={styles.lineEchart}
                                  id={`singleVoltageEchart${index}`}
                                />
                              </div>
                              <div className={styles.modalMainViewEchartTitleView}>
                                <div className={styles.modalMainViewEchartTitleViewTitle}>
                                  单个电池温度（℃）
                                </div>
                                <div className={styles.modalMainViewEchartTitleViewDetail}>
                                  <div className={styles.modalMainViewEchartTitleViewDetailItem}>
                                    <div
                                      className={styles.modalMainViewEchartTitleViewDetailItemTitle}
                                    >
                                      单体最高温度：{Math.max(...i.probeTemperatureList)}℃
                                    </div>
                                    <div
                                      className={
                                        styles.modalMainViewEchartTitleViewDetailItemDetail
                                      }
                                    >
                                      单体序号：
                                      {i.probeTemperatureList
                                        ?.map(item => item)
                                        .indexOf(Math.max(...i.probeTemperatureList).toString()) +
                                        1}
                                    </div>
                                  </div>
                                  <div className={styles.modalMainViewEchartTitleViewDetailItem}>
                                    <div
                                      className={styles.modalMainViewEchartTitleViewDetailItemTitle}
                                    >
                                      单体最低温度：{Math.min(...i.probeTemperatureList)}℃
                                    </div>
                                    <div
                                      className={
                                        styles.modalMainViewEchartTitleViewDetailItemDetail
                                      }
                                    >
                                      单体序号：
                                      {i.probeTemperatureList
                                        ?.map(item => item)
                                        .indexOf(Math.min(...i.probeTemperatureList).toString()) +
                                        1}
                                    </div>
                                  </div>
                                </div>
                              </div>
                              <div className={styles.modalMainViewEchartView}>
                                <div
                                  className={styles.lineEchart}
                                  id={`singleTempEchart${index}`}
                                />
                              </div>
                            </div>
                          );
                        },
                      )}
                    </div>
                  }
                </div>
              </Tabs.TabPane>
              <Tabs.TabPane tab="运营信息" key="3">
                <div className={styles.modalMainView}>
                  <DatePicker
                    disabledDate={current => current && current > moment().endOf('day')}
                    defaultValue={moment()}
                    allowClear={false}
                    className={styles.modalDatePickerView}
                    onChange={(date, dateStr) => {
                      this.props.dispatch({
                        type: 'common/listGet',
                        payload: {
                          url: '/usertravel/carUseInfo',
                          vin: this.state.modalOpenVin,
                          ym: dateStr,
                        },
                        callback: async data => {
                          if (data.statusCode === '0') {
                            await this.setState({
                              carUseInfoData: data.data,
                            });
                          }
                          this.setDailyMileageEchart();
                          this.setDailyChargeEchart();
                        },
                      });
                    }}
                    picker="month"
                  />
                  <div className={styles.optInfoView}>
                    <div className={styles.optInfoViewItem}>
                      <div className={styles.optInfoViewItemTitle}>今日里程（公里）</div>
                      <div className={styles.optInfoViewItemValue}>
                        {this.toThousands(this.state.carUseInfoData?.t1Mileage ?? '0')}
                      </div>
                    </div>
                    <div className={styles.optInfoViewItem}>
                      <div className={styles.optInfoViewItemTitle}>当月总公里（公里）</div>
                      <div className={styles.optInfoViewItemValue}>
                        {this.toThousands(this.state.carUseInfoData?.monthMileage ?? '0')}
                      </div>
                    </div>
                    <div className={styles.optInfoViewItem}>
                      <div className={styles.optInfoViewItemTitle}>累计总公里（公里）</div>
                      <div className={styles.optInfoViewItemValue}>
                        {this.toThousands(this.state.carUseInfoData?.totalMileage ?? '0')}
                      </div>
                    </div>
                    <div className={styles.optInfoViewItem}>
                      <div className={styles.optInfoViewItemTitle}>当月出行天数（天）</div>
                      <div className={styles.optInfoViewItemValue}>
                        {this.toThousands(this.state.carUseInfoData?.travelDays ?? '0')}
                      </div>
                    </div>
                    <div className={styles.optInfoViewItem}>
                      <div className={styles.optInfoViewItemTitle}>当月充电时间（小时）</div>
                      <div className={styles.optInfoViewItemValue}>
                        {this.toThousands(this.state.carUseInfoData?.monthChargingTime ?? '0')}
                      </div>
                    </div>
                    <div className={styles.optInfoViewItem}>
                      <div className={styles.optInfoViewItemTitle}>累计充电时间（小时）</div>
                      <div className={styles.optInfoViewItemValue}>
                        {this.toThousands(this.state.carUseInfoData?.totalChargingTime ?? '0')}
                      </div>
                    </div>
                  </div>
                  <div className={styles.lineEchart} id={'dailyMileageEchart'} />
                  <div className={styles.lineEchart} id={'dailyChargeEchart'} />
                </div>
              </Tabs.TabPane>
              <Tabs.TabPane tab="车况监控" key="4">
                <div className={styles.modalMainView}>
                  <StatusTab />
                </div>
              </Tabs.TabPane>
            </Tabs>
          </Modal>
        ) : null}
        {this.state.isTrajectoryModalOpen ? (
          <Modal
            title=""
            visible={true}
            centered
            width="100%"
            bodyStyle={{ maxHeight: '700px' }}
            footer={null}
            onCancel={() => {
              this.trajectoryMarker?.stopMove();
              this.setState({
                isTrajectoryModalOpen: false,
                trajectoryLineArr: [],
                selectTrajectoryNo: 99999,
              });
            }}
            onOk={() =>
              this.setState({
                isTrajectoryModalOpen: false,
                trajectoryLineArr: [],
                selectTrajectoryNo: 99999,
              })
            }
          >
            <div className={styles.trajectoryModalMainView}>
              <div className={styles.trajectoryModalMainViewTitleView}>
                <div className={styles.trajectoryModalMainViewTitleViewCarNo}>
                  车牌号码：{this.state.trajectoryModalCar?.licence ?? ''}
                </div>
                <div className={styles.trajectoryModalMainViewTitleViewVin}>
                  VIN码：{this.state.trajectoryModalCar?.vin ?? ''}
                </div>
                <div className={styles.trajectoryModalMainViewTitleViewRangePicker}>
                  <div className={styles.trajectoryModalMainViewTitleViewRangePickerTitle}>
                    轨迹日期：
                  </div>
                  <DatePicker
                    allowClear={false}
                    defaultValue={moment()}
                    disabledDate={current => current && current > moment().endOf('day')}
                    onChange={(date, dateString) => {
                      this.setState({
                        trajectorySearchEndDate: dateString,
                      });
                    }}
                  />
                  <div
                    onClick={() => {
                      this.props.dispatch({
                        type: 'common/listGet',
                        payload: {
                          url: '/vehicle/findwheelpath',
                          vin: this.state.trajectoryModalCar.vin,
                          searchDate: this.state.trajectorySearchEndDate,
                        },
                        callback: async data => {
                          if (data.statusCode === '0') {
                            data.data?.map((i, index) => (i.title = index));
                            this.setState({
                              trajectoryListData: data.data,
                              selectTrajectoryNo: 99999,
                            });
                          } else {
                            this.setState({
                              trajectoryListData: [],
                              selectTrajectoryNo: 99999,
                            });
                          }
                        },
                      });
                    }}
                    className={styles.trajectoryModalMainViewTitleViewRangePickerSearchBtn}
                  >
                    查询
                  </div>
                  <div
                    onClick={() => this.startTrajectoryAnimation()}
                    className={styles.trajectoryModalMainViewTitleViewRangePickerSearchBtn}
                  >
                    回放
                  </div>
                </div>
              </div>
              <div className={styles.trajectoryModalMainViewContentView}>
                <div className={styles.trajectoryModalMainViewContentViewLeft}>
                  <div className={styles.trajectoryModalMainViewContentViewLeftTitle}>轨迹列表</div>
                  <div className={styles.trajectoryModalMainViewContentViewListBackView}>
                    <List
                      itemLayout="vertical"
                      pagination={{
                        onChange: page => {
                          console.log(page);
                        },
                        size: 'small',
                        pageSize: 3,
                      }}
                      dataSource={this.state.trajectoryListData}
                      bordered
                      renderItem={item => (
                        <List.Item
                          onClick={() => {
                            const title = item.title;
                            this.setState({
                              selectTrajectoryNo: title,
                            });

                            const { vin, endTimestamp, startTimestamp } =
                              this.state.trajectoryListData[title];
                            this.props.dispatch({
                              type: 'common/listGet',
                              payload: {
                                url: '/usertravel/point',
                                vin,
                                endTime: endTimestamp,
                                startTime: startTimestamp,
                              },
                              callback: async rsp => {
                                if (rsp.statusCode === '0') {
                                  // 替换原始经纬度为高德坐标系
                                  const trajectoryLineArr = (rsp.data ?? []).map(trajectory => ({
                                    ...trajectory,
                                    lon: trajectory.lon_gcj02,
                                    lat: trajectory.lat_gcj02,
                                  }));

                                  this.trajectoryMap.clearMap();
                                  if (trajectoryLineArr.length > 0) {
                                    this.setState({
                                      trajectoryLineArr,
                                    });
                                    this.trajectoryMarker = new AMap.Marker({
                                      map: this.trajectoryMap,
                                      position: [
                                        trajectoryLineArr[0].lon,
                                        trajectoryLineArr[0].lat,
                                      ],
                                      icon: 'https://webapi.amap.com/images/car.png',
                                      offset: new AMap.Pixel(-26, -13),
                                      autoRotation: true,
                                      angle: -90,
                                    });

                                    new AMap.Polyline({
                                      map: this.trajectoryMap,
                                      path: trajectoryLineArr.map(trajectory => [
                                        trajectory.lon,
                                        trajectory.lat,
                                      ]),
                                      showDir: true,
                                      strokeColor: '#28F', //线颜色
                                      // strokeOpacity: 1,     //线透明度
                                      strokeWeight: 6, //线宽
                                      // strokeStyle: "solid"  //线样式
                                    });
                                    const passedPolyline = new AMap.Polyline({
                                      map: this.trajectoryMap,
                                      strokeColor: '#AF5', //线颜色
                                      strokeWeight: 6, //线宽
                                    });
                                    const self = this;
                                    this.trajectoryMarker.on('moving', function (e) {
                                      passedPolyline.setPath(e.passedPath);
                                      self.trajectoryMap.setCenter(e.target.getPosition(), true);
                                    });
                                    this.trajectoryMap.setFitView();
                                  }
                                }
                              },
                            });
                          }}
                          key={item.title}
                        >
                          <div
                            style={{
                              border:
                                this.state.selectTrajectoryNo === item.title
                                  ? '1px #288CFE solid'
                                  : '0',
                            }}
                            className={styles.trajectoryListViewItem}
                          >
                            <div className={styles.trajectoryListViewItemContent}>
                              起点：{item.startPointName ?? ''}
                            </div>
                            <div className={styles.trajectoryListViewItemContent}>
                              终点：{item.endPointName ?? ''}
                            </div>
                            <div className={styles.trajectoryListViewItemContent}>
                              开始时间：{item.startTime ?? ''}
                            </div>
                            <div className={styles.trajectoryListViewItemContent}>
                              结束时间：{item.endTime ?? ''}
                            </div>
                            <div className={styles.trajectoryListViewItemContent}>
                              里程：{item.eachMileage ?? '0'}公里
                            </div>
                          </div>
                        </List.Item>
                      )}
                    />
                  </div>
                </div>
                <div className={styles.trajectoryModalMainViewContentViewRight}>
                  <div id={'trajectoryMap'} className={styles.trajectoryMapView} />
                </div>
              </div>
            </div>
          </Modal>
        ) : null}
        {this.state.showAlarmModal ? (
          <Modal
            title=""
            visible={true}
            centered
            width="100%"
            bodyStyle={{ height: '900px' }}
            footer={null}
            onCancel={() => this.setState({ showAlarmModal: false })}
            onOk={() => this.setState({ showAlarmModal: false })}
          >
            <iframe
              src={this.state.alarmUrl}
              style={{ display: 'block', height: '100%' }}
              width="100%"
              frameBorder="0"
            />
          </Modal>
        ) : null}
        {this.state.showAlarmByVinModal ? (
          <Modal
            title=""
            visible={true}
            centered
            width="100%"
            bodyStyle={{ height: '900px' }}
            footer={null}
            onCancel={() => this.setState({ showAlarmByVinModal: false })}
            onOk={() => this.setState({ showAlarmByVinModal: false })}
          >
            <iframe
              src={`${this.state.alarmByVinUrl}&VIN=${this.state.alarmByVinUrlVin}`}
              style={{ display: 'block', height: '100%' }}
              width="100%"
              frameBorder="0"
            />
          </Modal>
        ) : null}
      </div>
    );
  }
}
export default connect(mapStateToProps)(MapMonitoring);
